import React, { Component, createRef } from 'react'
import echarts from 'echarts'
import { Card, Spin } from 'antd'
import './chart.less'
import { antIcon } from '../../loading'
import { getChartData } from '../../../requests'
var seriesLabel = {
  normal: {
    show: true,
    textBorderColor: '#333',
    textBorderWidth: 2,
    isLoading: true
  }
}

export default class BooksTrendsChart extends Component {
  constructor() {
    super()
    this.booksTrends = createRef()
    this.state = {
      chartData: { collectNum: [], borrowNum: [], exchangeNum: [] }
    }
  }

  componentDidMount() {
    getChartData().then(resp => {
      if (resp.data.res_code === 200) {
        this.setState(
          {
            isLoading: false,
            chartData: resp.data.data.booksTrendsChartData
          },
          () => {
            const option = {
              title: {
                text: '上周书籍统计'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              //图例
              legend: {
                data: ['收藏量', '借阅量', '上传量'],
                left: 300
              },
              //图表
              grid: {
                left: 50
              },
              toolbox: {
                show: true,
                feature: {
                  saveAsImage: {}
                }
              },

              xAxis: {
                type: 'category',
                data: [
                  '星期一',
                  '星期二',
                  '星期三',
                  '星期四',
                  '星期五',
                  '星期六',
                  '星期日'
                ],
                axisLabel: {
                  margin: 20
                }
              },
              yAxis: {
                type: 'value',
                name: '交换量/本',
                axisLabel: {
                  formatter: '{value}'
                }
              },
              series: [
                {
                  name: '收藏量',
                  color: '#80DEEA',
                  type: 'bar',
                  data: this.state.chartData.collectNum,
                  label: seriesLabel
                },
                {
                  name: '借阅量',
                  color: '#C5E1A5',
                  type: 'bar',
                  label: seriesLabel,
                  data: this.state.chartData.borrowNum
                },
                {
                  name: '上传量',
                  color: '#B39DDB',
                  type: 'bar',
                  label: seriesLabel,
                  data: this.state.chartData.exchangeNum
                }
              ]
            }
            this.booksTrendsChart = echarts.init(this.booksTrends.current)
            this.booksTrendsChart.setOption(option)
          }
        )
      }
    })
  }
  render() {
    console.log(this.state.chartData.borrowNum.reduce((a, b) => a + b, 0))
    return (
      <Spin indicator={antIcon} spinning={this.state.isLoading}>
        <div className="booksTrendsChart-chartBox">
          <div ref={this.booksTrends} className="booksTrendsChart-chart" />
          <Card
            title="书籍动向统计"
            bordered={true}
            className="booksTrendsChart-statistics"
          >
            <p>
              收藏量最高:&nbsp;{Math.max(...this.state.chartData.collectNum)}
              &nbsp;本
            </p>
            <p>
              借阅量最高:&nbsp;{Math.max(...this.state.chartData.borrowNum)}
              &nbsp;本
            </p>
            <p>
              上传量最高:&nbsp;{Math.max(...this.state.chartData.exchangeNum)}
              &nbsp;本
            </p>
            <p>
              上周总收藏量:&nbsp;
              {this.state.chartData.collectNum.reduce((a, b) => a + b, 0)}
              &nbsp;本
            </p>
            <p>
              上周总借阅量:&nbsp;
              {this.state.chartData.borrowNum.reduce((a, b) => a + b, 0)}
              &nbsp;本
            </p>
            <p>
              上周总上传量:&nbsp;
              {this.state.chartData.exchangeNum.reduce((a, b) => a + b, 0)}
              &nbsp;本
            </p>
          </Card>
        </div>
      </Spin>
    )
  }
}
